<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>
<body>
    <div id="app"></div>
    <script>

    //  1. data 作为数据配置项，通常是以函数形式呈现，而不是以对象形式呈现
    //   1. 如果是对象的 话，在修改子项数据时候，由于地址变化，其他元素的值也会跟着变化
    //   2. 如果是以 new 关键字创建的函数，每次new创建的 实例指向的地址不相同，所以互相不会有影响

        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return {
                    count:3
                }
            }
        })
        // vm.$data:vue 实例观察的数据对象
        console.log(vm.$data);

        // 2. vue会吧实例对象上的 数据作为对象的伪代码展示在VM上，
        //     这种类似于吧new 实例对象上的属性遍历出来添加到VM上
                    // 这样就可以直接在VM上取数，而不需要VM.data来取数



    </script>
    
</body>
</html>